<template>
  <view class="container">
    <view class="header">
      <text class="title">收益记录</text>
    </view>
    
    <!-- 统计信息 -->
    <view class="summary-card">
      <view class="summary-item">
        <text class="summary-label">本月收益</text>
        <text class="summary-value">¥{{ monthEarnings }}</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">累计收益</text>
        <text class="summary-value">¥{{ totalEarnings }}</text>
      </view>
    </view>
    
    <!-- 收益记录列表 -->
    <view class="record-list">
      <view v-if="records.length === 0" class="empty-state">
        <image src="/static/images/noData.png" class="empty-img" />
        <text class="empty-text">暂无收益记录</text>
      </view>
      <view v-else>
        <view v-for="record in records" :key="record.id" class="record-item">
          <view class="record-info">
            <view class="record-main">
              <text class="date">{{ record.earningDate }}</text>
              <text class="orders">完成订单：{{ record.totalOrders }}单</text>
            </view>
            <view class="record-amount">
              <text class="amount">¥{{ record.totalEarnings }}</text>
            </view>
          </view>

        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more" @click="loadMore">
      <text class="load-text">{{ loading ? '加载中...' : '加载更多' }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { getEarningsRecords, getTotalEarnings, getEarningsStatistics } from '@/api/earnings'

const userStore = useUserStore()

// 统计数据
const monthEarnings = ref('0.00')
const totalEarnings = ref('0.00')

// 列表数据
const records = ref([])
const loading = ref(false)
const hasMore = ref(true)
const pageNo = ref(1)
const pageSize = 20

// 加载统计数据
const loadSummaryData = async () => {
  try {
    if (!userStore.deliveryId) return
    
    const totalRes = await getTotalEarnings(userStore.deliveryId)
    totalEarnings.value = totalRes.data || '0.00'
    
    // 获取收益统计数据（包含本月收益）
    const statsRes = await getEarningsStatistics(userStore.deliveryId)
    if (statsRes.data) {
      monthEarnings.value = statsRes.data.monthEarnings || '0.00'
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

// 加载收益记录
const loadRecords = async (reset = false) => {
  if (loading.value) return
  
  try {
    loading.value = true
    
    if (reset) {
      pageNo.value = 1
      records.value = []
      hasMore.value = true
    }
    
    const params = {
      deliveryId: userStore.deliveryId,
      pageNo: pageNo.value,
      pageSize
    }
    
    const {data} = await getEarningsRecords(params)
    
    if (data?.list) {
      if (reset) {
        records.value = data.list
      } else {
        records.value.push(...data.list)
      }
      
      hasMore.value = records.value.length < data.total
      if (data.list.length > 0) {
        pageNo.value++
      }
    }
  } catch (error) {
    console.error('加载收益记录失败:', error)
    uni.showToast({ title: '加载记录失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  if (!loading.value && hasMore.value) {
    loadRecords()
  }
}



onMounted(async () => {
  await loadSummaryData()
  await loadRecords(true)
})
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 统计信息卡片 */
.summary-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}

.summary-item {
  text-align: center;
  flex: 1;
}

.summary-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.summary-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #007AFF;
  display: block;
}

/* 收益记录列表 */
.record-list {
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.record-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.record-item:last-child {
  border-bottom: none;
}

.record-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.record-main {
  flex: 1;
}

.date {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.orders {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.record-amount {
  text-align: right;
}

.amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #007AFF;
  display: block;
}



/* 加载更多 */
.load-more {
  text-align: center;
  padding: 30rpx;
  margin-top: 20rpx;
}

.load-text {
  font-size: 28rpx;
  color: #007AFF;
}
</style>

<style lang="scss">
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
}

.header {
  padding: 60rpx 30rpx 40rpx;
  text-align: center;
}

.title {
  font-size: 44rpx;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.summary-card {
  margin: 0 30rpx 30rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-around;
}

.summary-item {
  text-align: center;
  flex: 1;
}

.summary-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
  font-weight: 500;
}

.summary-value {
  font-size: 36rpx;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

.record-list {
  margin: 0 30rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-img {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 24rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  font-weight: 500;
}

.record-item {
  padding: 32rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease;
}

.record-item:last-child {
  border-bottom: none;
}

.record-item:active {
  background-color: rgba(102, 126, 234, 0.03);
}

.record-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.record-main {
  flex: 1;
}

.date {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.orders {
  font-size: 26rpx;
  color: #666;
  display: block;
  font-weight: 500;
}

.record-amount {
  text-align: right;
}

.amount {
  font-size: 36rpx;
  font-weight: 700;
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}



.load-more {
  text-align: center;
  padding: 40rpx 0;
  margin: 20rpx 30rpx 0;
}

.load-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}
</style>